<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>用JS实现瀑布流效果</title>
    <link href="css/index.css" rel="stylesheet">
</head>
<body>

<!--最外层-->
<div id="main">
    
    <div class="box">
        <div class="pic">
            <img src="images/0.jpg">
        </div>
    </div>

    <div class="box">
        <div class="pic">
            <img src="images/1.jpg">
        </div>
    </div>

    <div class="box">
        <div class="pic">
            <img src="images/2.jpg">
        </div>
    </div>

    <div class="box">
        <div class="pic">
            <img src="images/3.jpg">
        </div>
    </div>

    <div class="box">
        <div class="pic">
            <img src="images/4.jpg">
        </div>
    </div>

    <div class="box">
        <div class="pic">
            <img src="images/5.jpg">
        </div>
    </div>

    <div class="box">
        <div class="pic">
            <img src="images/6.jpg">
        </div>
    </div>

    <div class="box">
        <div class="pic">
            <img src="images/7.jpg">
        </div>
    </div>

    <div class="box">
        <div class="pic">
            <img src="images/0.jpg">
        </div>
    </div>

    <div class="box">
        <div class="pic">
            <img src="images/0.jpg">
        </div>
    </div>

    <div class="box">
        <div class="pic">
            <img src="images/8.jpg">
        </div>
    </div>

    <div class="box">
        <div class="pic">
            <img src="images/9.jpg">
        </div>
    </div>

    <div class="box">
        <div class="pic">
            <img src="images/10.jpg">
        </div>
    </div>

    <div class="box">
        <div class="pic">
            <img src="images/11.jpg">
        </div>
    </div>

    <div class="box">
        <div class="pic">
            <img src="images/12.jpg">
        </div>
    </div>


    <div class="box">
        <div class="pic">
            <img src="images/13.jpg">
        </div>
    </div>


    <div class="box">
        <div class="pic">
            <img src="images/14.jpg">
        </div>
    </div>


    <div class="box">
        <div class="pic">
            <img src="images/15.jpg">
        </div>
    </div>


    <div class="box">
        <div class="pic">
            <img src="images/16.jpg">
        </div>
    </div>


    <div class="box">
        <div class="pic">
            <img src="images/17.jpg">
        </div>
    </div>


    <div class="box">
        <div class="pic">
            <img src="images/18.jpg">
        </div>
    </div>


    <div class="box">
        <div class="pic">
            <img src="images/19.jpg">
        </div>
    </div>


    <div class="box">
        <div class="pic">
            <img src="images/20.jpg">
        </div>
    </div>


    <div class="box">
        <div class="pic">
            <img src="images/21.jpg">
        </div>
    </div>


    <div class="box">
        <div class="pic">
            <img src="images/22.jpg">
        </div>
    </div>


    <div class="box">
        <div class="pic">
            <img src="images/23.jpg">
        </div>
    </div>


    <div class="box">
        <div class="pic">
            <img src="images/24.jpg">
        </div>
    </div>


    <div class="box">
        <div class="pic">
            <img src="images/25.jpg">
        </div>
    </div>


    <div class="box">
        <div class="pic">
            <img src="images/26.jpg">
        </div>
    </div>


    <div class="box">
        <div class="pic">
            <img src="images/27.jpg">
        </div>
    </div>

    <script src="js/index.js" type="text/javascript"></script>
    
</div>

</body>
</html>